<template>
  <div class="page-content">
    <div style="margin-bottom: 8px">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <a href="javascript:;" @click="resetBack">团队会员订单管理</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>批次员工({{ peOrgData.peOrgName }})</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-card style="width: 100%; height: calc(100% - 30px)">
      <div class="header">
        <div class="header-box">
          <span class="member-label">{{ peOrgData.peBatchName }}</span>
          <div class="member-time">
            <div>
              开卡时间：
              <span class="member-time-value">
                {{
                  peOrgData.createTime
                    ? dayjs(peOrgData.createTime).format('YYYY-MM-DD HH:mm:ss')
                    : ''
                }}
              </span>
            </div>
            <div style="margin-left: 48px">
              会员生效时间：
              <span class="member-time-value">
                {{
                  peOrgData.vipStartTime
                    ? dayjs(peOrgData.vipStartTime).format('YYYY-MM-DD HH:mm')
                    : ''
                }}
                ~
                {{
                  peOrgData.vipEndTime ? dayjs(peOrgData.vipEndTime).format('YYYY-MM-DD HH:mm') : ''
                }}
              </span>
            </div>
          </div>
        </div>
        <Condition
          :condition="condition"
          :btns="['search', 'reset']"
          @search="searchHandle"
          @reset="resetHandle"
        />
        <span>共筛选出{{ pagination.total }}条数据</span>
      </div>
      <div class="main">
        <a-table
          class="table"
          size="small"
          :loading="loading"
          :dataSource="List"
          :columns="columns"
          :pagination="pagination"
          @change="paginationChange"
          :sticky="{ offsetHeader: 0 }"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex == 'no'">
              {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
            </template>
            <template v-else-if="column.dataIndex == 'peStaffName'">
              {{ record.peStaffName }}
              {{ record.gender }}
              {{ record.age || '' }}
            </template>
            <template v-else-if="column.dataIndex == 'createTime'">
              {{ record.createTime ? dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
            </template>
            <template v-else-if="column.dataIndex == 'peLatestMedicalTime'">
              {{
                record.peLatestMedicalTime
                  ? dayjs(record.peLatestMedicalTime).format('YYYY-MM-DD HH:mm:ss')
                  : '/'
              }}
            </template>
            <template v-else-if="column.dataIndex == 'jobType'">
              <span v-if="record.jobType">{{ record.jobType }}</span>
              <span v-else>/</span>
            </template>
            <template v-else-if="column.dataIndex == 'peStaffStatus'">
              <a-tag
                style="color: #3491fa; background-color: #e8f7ff; border: 1px solid #3491fa"
                v-if="record.peStaffStatus == 'on'"
                >在职</a-tag
              >
              <a-tag
                style="color: #1d2129; background-color: #f2f3f5; border: 1px solid #c9cdd4"
                v-else-if="record.peStaffStatus == 'off'"
                >离职</a-tag
              >
            </template>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
defineOptions({ name: '批次员工' })

import { ref, reactive, onMounted } from 'vue'
import dayjs from 'dayjs'
import Condition from '@/components/ConditionSearch/index.vue'
import { getImportEmployeePage } from './groupMemberOrder.api'

const emit = defineEmits(['close'])
const List = ref([])
const loading = ref(false)
const peBatchId = ref()
const peOrgData = ref<any>({
  peBatchName: '',
  createTime: '',
  vipStartTime: '',
  peBatchId: '',
  peOrgName: '',
  peOrgId: ''
})
const condition = ref([
  {
    title: '',
    dataIndex: 'searchParam',
    type: 'input',
    value: '',
    placeholder: '请输入姓名/手机号/证件号'
  },
  {
    title: '员工状态',
    dataIndex: 'peStaffStatus',
    type: 'select',
    data: [
      {
        label: '在职',
        value: 'on'
      },
      {
        label: '离职',
        value: 'off'
      }
    ],
    value: undefined,
    placeholder: '请选择'
  },
  {
    title: '导入时间',
    dataIndex: 'createTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  }
])
const columns = ref<any[]>([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: 80
  },
  {
    title: '员工',
    dataIndex: 'peStaffName',
    key: 'peStaffName',
    align: 'left'
  },
  {
    title: '手机号',
    dataIndex: 'peStaffPhone',
    key: 'peStaffPhone',
    align: 'left'
  },
  {
    title: '证件号',
    dataIndex: 'idNo',
    key: 'idNo',
    align: 'left'
  },
  {
    title: '部门',
    dataIndex: 'departmentName',
    key: 'departmentName',
    align: 'left'
  },
  {
    title: '岗位',
    dataIndex: 'jobType',
    key: 'jobType',
    align: 'left'
  },
  {
    title: '状态',
    dataIndex: 'peStaffStatus',
    key: 'peStaffStatus',
    align: 'left'
  },
  {
    title: '本批次导入时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'left'
  }
])
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  pageSizeOptions: ['10', '20', '50', '100']
})
const paginationChange = (page: any) => {
  pagination.value = { ...page }
  loading.value = true
  getDataList()
}
const getDataList = () => {
  const obj = condition.value.reduce((c, v) => {
    if (v.value || v.value === 0) {
      if (v.dataIndex == 'createTime') {
        return Object.assign(c, {
          startTime: v.value.length ? dayjs(v.value[0]).format('YYYY-MM-DD HH:mm:00') : '',
          endTime: v.value.length ? dayjs(v.value[1]).format('YYYY-MM-DD HH:mm:00') : ''
        })
      } else {
        return Object.assign(c, { [v.dataIndex]: v.value })
      }
    } else {
      return c
    }
  }, {})
  getImportEmployeePage({
    ...obj,
    peOrgId: peOrgData.value.peOrgId,
    peBatchId: peOrgData.value.peBatchId,
    page: pagination.value.current,
    limit: pagination.value.pageSize
  })
    .then((res) => {
      List.value = res.data.list
      pagination.value.total = res.data.total
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
const init = (data: any) => {
  peOrgData.value = data
  peBatchId.value = data.peBatchId
  loading.value = true
  getDataList()
}
const searchHandle = () => {
  loading.value = true
  pagination.value.current = 1
  getDataList()
}
const resetHandle = () => {
  pagination.value.current = 1
  pagination.value.pageSize = 10
  condition.value.map((v) => {
    if (v.type === 'select') {
      v.value = undefined
    } else if (v.type === 'dayRange') {
      v.value = []
    } else {
      v.value = ''
    }
  })
  loading.value = true
  getDataList()
}

const resetBack = () => {
  emit('close')
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.tools-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-box {
  display: flex;
  flex-direction: column;
  align-items: start;
  height: 92px;
  padding: 16px 24px;
  margin-bottom: 24px;
  background-image: url('@/assets/images/member-bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 8px;
  // background: #e8f7ff;
  box-shadow: 0 2px 6px 0 rgba(161, 188, 202, 26%);

  .member-label {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
  }

  .member-time {
    display: flex;
    align-items: center;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #4e5969;
  }

  .member-time-value {
    color: #1d2129;
  }
}
</style>
